<template>
	<div class="container">
		<div class="jx-container">
      <el-form ref="form" :model="params_list" :rules="rules" label-width="130px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <el-form-item label="支付方式：" prop="type">
                <el-tabs v-model="params_list.type" type="card">
                  <el-tab-pane label="支付宝支付" name="支付宝"></el-tab-pane>
                  <el-tab-pane label="微信支付" name="微信"></el-tab-pane>
                </el-tabs>
              </el-form-item>
              <el-form-item label="充值金额：" prop="amount">
                <el-input v-model="params_list.amount" type="number" placeholder="请输入充值金额">
                </el-input>
                <span class="gray">元</span>
              </el-form-item>
              <el-form-item label="账户金额：" >
                <span class="red">￥5,123.00</span><span class="gray">元</span>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">立即付款</el-button>
        <div class="protocol" style="margin-top: 15px;"><el-checkbox v-model="boo.checked">我已经同意 <el-button type="text">******</el-button></el-checkbox></div>
      </div>
    </div>
    <!-- 新增/编辑 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="45%">
      <div slot="title" class="header-title">
        <span class="title-name">向云途养护付款</span>
      </div>
      <div class="code-recharge">
        <span>扫二维码向云途养护科技有限公司付款</span>
        <img src="/static/img/u5291.png"/>
        <el-button type="text" style="color: #999;" @click="breakCode">刷新一下</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        https: {
          // list: this.$api.setting.index,
        },
        boo: {
          saveing: false,
          checked: false,
          showDialog: false,
        },
        params_list: {
          type: '支付宝',
          amount: '',
        },
        rules: {
          type: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
          amount: [{ required: true, message: '请输入充值金额', trigger: 'blur' }],
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      getList(){
        let _self = this
        let params = {}
        // let success = (res)=>{
        //   res = res.data
        //   if(res.retCode == 1){
        //     _self.params_list = res.retObject
        //   }else{
        //     _self.$message.error(res.retMsg)
        //   }
        // }
        // _self.$axios.get(_self.https.list.list, params, success) 
      },
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            if(!_self.boo.checked) return _self.$message.error('请同意协议')
            // _self.boo.saveing = true
            let params = {
              type: _self.params_list.type,
              amount: _self.params_list.amount,
            }    
            _self.boo.showDialog = true
            console.log(params)
            // let success = (res)=>{
            //   res = res.data
            //   if(res.retCode == 1){
            //     _self.$message.success('基本设置成功')
            //   }else{
            //     _self.$message.error(res.retMsg)
            //   }
            //   _self.boo.saveing = false
            // }
            // _self.$axios.body(_self.https.list.add, params, success)   
					}else{
						return false
					}
				})
      },
      breakCode(){

      }
    }
	}

</script>
<style scoped lang="sass">
  .jx-form .el-input--small, .jx-form .el-textarea
    width: 425px
  .gray
    display: inline-block
  .jx-form /deep/ .el-form-item__label
    color: #333
    line-height: 32px
  /deep/ .el-tabs__header
    margin: 0
  /deep/ .el-tabs--card>.el-tabs__header
    border-bottom: 0
    .el-tabs__nav
      border: 0
    .el-tabs__item
      border-bottom: 1px solid #E4E7ED
    .el-tabs__item.is-active
      border-bottom-color: #409EFF
      border-left-color: #409eff !important
    .el-tabs__item:first-child
      border-left: 1px solid #E4E7ED
  /deep/ .el-tabs__item
    margin-right: 20px
    line-height: 32px
    height: 32px
    border: 1px solid #E4E7ED
    border-radius: 5px
  /deep/ .el-tabs__item.is-active
    border-color: #409EFF
  .unit
    display: flex
    flex-wrap: wrap 
    width: 80%
    .item-inline
      display: flex
      margin-right: 30px
      margin-bottom: 20px
      height: 50px
      line-height: 50px
      .el-input
        max-width: 200px
        margin-left: 15px
      .jx-btn
        margin-top: 12px
      /deep/ .jx-uploader
        .el-upload
          height: 45px
        img
          width: 45px
          height: 45px
        .avatar-uploader-icon
          width: 45px
          height: 45px
          line-height: 45px
  .code-recharge
    text-align: center
    img
      display: block 
      margin: 25px auto
      width: 50%
</style>
